import * as React from 'react';
import { Layers, Refresh, Plus, Minus, Radar } from '@icon-park/react';
import SmartMapProvider from '../provider/SmartMapProvider';


const SmartMapZoomUtilsBtn = () => {

    const {
        layerManageDrawerOpen,
        setLayerManageDrawerOpen,
        zoom,
        handleSetMapZoom,
        handleResetMapStatus
    } = React.useContext(SmartMapProvider);

    return (
        <div
            className='flex-col map-tool-btn-container'
            style={{
                top: 12,
                right: 12
            }}
        >
            <div
                className='flex-col map-tool-btn'
                onClick={() => handleSetMapZoom(zoom + 1)}
            >
                <Plus theme="outline" size="22" fill="#333" strokeWidth={4} />
            </div>
            <div className='map-tool-btn-border'></div>
            <div
                className='flex-col map-tool-btn'
                onClick={() => handleSetMapZoom(zoom - 1)}
            >
                <Minus theme="outline" size="22" fill="#333" strokeWidth={4} />
            </div>
            <div className='map-tool-btn-border'></div>
            <div
                className='flex-col map-tool-btn'
                onClick={() => handleResetMapStatus()}
            >
                <Radar theme="outline" size="20" fill="#333" strokeWidth={4} />
            </div>
        </div>
    )
}


export default SmartMapZoomUtilsBtn;